footer {
    display: inline-block !important;
    vertical-align: bottom;
    width: 100%;
    height: 145px;
    background-color: #3f3f3f;
    div {
        text-align: center;
    }
    a {
        color: #989898;
        &:hover {
            color: #108ee9;
        }
    }
    span {
        display: inline-block;
        margin: 20px 22px;
        font-size: 14px;
        line-height: 38px;
        vertical-align: top;
        color: #989898;
    }
    .wxwb {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        margin: 20px 22px 12px 22px;
        display: inline-block;
        cursor: pointer;
    }
    .weixin {
        @extend .wxwb;
        position: relative;
        background: url('../../../build/images/weixin.png');
        div {
            position: absolute;
            top: -20px;
            left: -50px;
            display: inline-block;
            visibility: hidden;
            width: 137px;
            height: 1px;
            background: url('../../../build/images/bubble.png');
            background-repeat: no-repeat;
            /*background-size: 111px 111px;
            background-color: #6d6d6d;
            background-position: center center;*/
            transition: all 0.5s;
            -moz-transition: all 0.5s; /* Firefox 4 */
            -webkit-transition: all 0.5s; /* Safari 和 Chrome */
            -o-transition: all 0.5s;    
            img {
                width: 111px;
                height: 0px;
                margin: 12px; 
                transition: all 0.5s;
                -moz-transition: all 0.5s; /* Firefox 4 */
                -webkit-transition: all 0.5s; /* Safari 和 Chrome */
                -o-transition: all 0.5s;
            }    
        }
    }
    .weixin:hover>div {
        visibility: visible;
        position: absolute;
        height: 147px;
        top: -153px;
        img {
            height: 111px;
        }
    }
    .weibo {
        @extend .wxwb;
        position: relative;
        background: url('../../../build/images/weibo.png');
        div {
            position: absolute;
            top: -20px;
            left: -50px;
            display: inline-block;
            visibility: hidden;
            width: 137px;
            height: 1px;
            background: url('../../../build/images/bubble.png');
            background-repeat: no-repeat;
            /*background-size: 111px 111px;
            background-color: #6d6d6d;
            background-position: center center;*/
            transition: all 0.5s;
            -moz-transition: all 0.5s; /* Firefox 4 */
            -webkit-transition: all 0.5s; /* Safari 和 Chrome */
            -o-transition: all 0.5s;    
            img {
                width: 111px;
                height: 0px;
                margin: 12px; 
                transition: all 0.5s;
                -moz-transition: all 0.5s; /* Firefox 4 */
                -webkit-transition: all 0.5s; /* Safari 和 Chrome */
                -o-transition: all 0.5s;
            }    
        }
    }
    .weibo:hover>div {
        visibility: visible;
        position: absolute;
        height: 147px;
        top: -153px;
        img {
            height: 111px;
        }
    }
    .weixin:hover {
        background: url('../../../build/images/weixinActive.png'); 
    }
    .weibo:hover {
        background: url('../../../build/images/weiboActive.png'); 
    }
    .line {
        display: inline-block;
        border-top:1px solid #989898;
        width: 90%;
        vertical-align: top;
        font-size: 0;
    }
    .copyRight {
        margin: 0;
    }
}